<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="panel-title">
        <span>实用工具</span>
        <span class="panel-title-num" v-show="taskTotal">{{ taskTotal }}</span>
      </h4>
    </div>

    <div v-loading="loading">
      <el-table :data="tasks" border class="table-sm">
        <el-table-column label="工具名称" prop="taskName" align="center"></el-table-column>
        <el-table-column label="未处理/已处理" prop="taskCount" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.taskType === 100">-</span>
            <span v-else>{{ scope.row.taskCount }}/{{ scope.row.process }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="showDialog(scope.row)"
              icon="el-icon-edit"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <task-loan :visible.sync="loanVisible" :sign-type="signType"></task-loan>

    <task-postloan :visible.sync="arrivalVisible"></task-postloan>
  </div>
</template>
<script>
import TaskLoan from '@/bank/views/business/index/SignDialog'
import TaskPostloan from '@/bank/views/index/myTask/TaskPostloan'
import { enumTaskType } from '@/credit/plugins/enumTown'
import { mapGetters } from 'vuex'
export default {
  components: {
    TaskLoan,
    TaskPostloan,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      enumTaskType,
      loading: false,
      approvalVisible: false,
      registerVisible: false,
      replyVisible: false,
      loanVisible: false,
      repaymentVisible: false,
      arrivalVisible: false,
      signType: [1, 2, 3, 4],
    }
  },
  computed: {
    ...mapGetters(['myTaskCount']),
    tasks() {
      const data = []
      const mustKeys = [7, 16]
      mustKeys.forEach(item => {
        data.push({
          taskType: item,
          taskName: enumTaskType[item],
          taskCount: this.getNum(item),
          process:
            (this.myTaskCount && this.myTaskCount[item] && this.myTaskCount[item].process) || 0,
        })
      })
      data.push({
        taskType: 100,
        taskName: '贷后管理',
        taskCount: 0,
      })
      return data
    },
    taskTotal() {
      return this.tasks.reduce((prev, curr) => prev + curr.taskCount, 0)
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getNum(type) {
      return (this.myTaskCount && this.myTaskCount[type] && +this.myTaskCount[type].num) || 0
    },
    async getData() {
      this.loading = true
      await this.$utils.promise(this.$store.dispatch('getMyTaskCount'))
      this.loading = false
    },
    showDialog(row) {
      switch (+row.taskType) {
        case 3:
          this.approvalVisible = true
          break
        case 7:
          this.loanVisible = true
          this.signType = [1, 2, 3, 4]
          break
        case 14:
          this.registerVisible = true
          break
        case 16:
          this.loanVisible = true
          this.signType = [5]
          break
        case 17:
          this.repaymentVisible = true
          break
        case 100:
          this.arrivalVisible = true
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-title {
  position: relative;
  font-size: 1.142857rem;

  .panel-title-num {
    position: absolute;
    right: -1rem;
    padding: 0 0.21rem;
    border-radius: 1rem;
    background-color: red;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-align: center;
  }
}
/deep/ .el-table__header {
  width: 100% !important;
}
/deep/ .el-table__body {
  width: 100% !important;
}
</style>
